import React, { useEffect, useState } from "react";
import { View, Text, Image, Button } from '@tarojs/components'
import Taro, { useDidShow } from "@tarojs/taro";
import { fetchPageConfigDetailForUser } from '@/server/shop';
import Router from '@/utils/router'
import { AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'
export const PersonalCenter = (props) => {
    const [userInfo, setUserInfo] = useState({})
    useDidShow(() => {
        const { organizationId } = Taro.getStorageSync('userInfo')
        setUserInfo(Taro.getStorageSync('userInfo'))

        if (organizationId) { fetchData() }
    })
    const [list, setList] = useState([{ "disabled": true, "key": "user", "label": "基本信息", "value": "user" }, { "label": "课程", "disabled": true, "key": "task", "value": "task" }, { "label": "订单", "value": "order", "key": "order" }, { "label": "工具", "value": "tools", "key": "tools" }])

    const fetchData = () => {
        fetchPageConfigDetailForUser({ pageType: 'user', }).then((e = {}) => {
            const { id, pageConfig = '{}' } = e
            if (id) {
                const config = JSON.parse(pageConfig)
                setList(config)
            } else {

            }
        })

    }
    const { profile, username, token } = userInfo
    const reduceRouter = (fn) => {
        fn && fn()
    }
    const render = {
        user: token ? <View onClick={() => reduceRouter(() => Router('information'))} className="PersonalCenter_banner_content">
            < View className="PersonalCenter_top_profile" >
                <Image className="PersonalCenter_top_image" src={profile} />
            </View >
            <View className="PersonalCenter_top_body">
                <View className="PersonalCenter_top_PersonalCentername">{username}</View>
            </View>
        </View > : <View onClick={() => reduceRouter(() => Router('login'))} className="PersonalCenter_banner_content">
            <View className="PersonalCenter_top_profile">
                <Image className="PersonalCenter_top_image" src={profile} />
            </View>
            <View className="PersonalCenter_top_body">
                <View className="PersonalCenter_top_PersonalCentername">{'请登录'}</View>
            </View>
        </View>,
        task: <View className="PersonalCenter_tabs_label">
            <View className="PersonalCenter_c_box PersonalCenter_c_icon1" onClick={() => reduceRouter(() => Router('course', {
                args: { type: 'live' }
            }))}></View>
            <View className="PersonalCenter_c_box PersonalCenter_c_icon2" onClick={() => reduceRouter(() => Router('course', {
                args: { type: 'shop' }
            }))}></View>
            <View className="PersonalCenter_c_box PersonalCenter_c_icon3" onClick={() => Router('selectedCourses')}></View>
        </View>,
        order: <View className="PersonalCenter_tabs_box">
            <View className="PersonalCenter_tabs"
                onClick={() => reduceRouter(() => reduceRouter(() => Router('orderList')))}
            >
                <View className="PersonalCenter_label_icon1  PersonalCenter_label"></View>
                <View className="PersonalCenter_value">全部订单</View>
            </View>
            <View className="PersonalCenter_tabs"
                onClick={() => reduceRouter(() => Router('orderList', {
                    args: { status: '0' }
                }))}
            >
                <View className="PersonalCenter_label_icon2  PersonalCenter_label"></View>
                <View className="PersonalCenter_value">待付款</View>
            </View>
            <View className="PersonalCenter_tabs"
                onClick={() => reduceRouter(() => Router('orderList', {
                    args: { status: '1' }
                }))}
            >
                <View className="PersonalCenter_label_icon3  PersonalCenter_label"></View>
                <View className="PersonalCenter_value">已完成</View>
            </View>


            <View className="PersonalCenter_tabs
    " onClick={() => reduceRouter(() => Router('orderList', {
                args: { status: '2' }
            }))}
            >
                <View className="PersonalCenter_label_icon4  PersonalCenter_label"></View>
                <View className="PersonalCenter_value">已关闭</View>
            </View>
        </View>,
        tools: <View className="PersonalCenter_tool">
            <View onClick={() => { reduceRouter(() => Router('prizeList')) }} className="PersonalCenter_tool_list" ><Text>我的奖品</Text></View>
            <View onClick={() => { reduceRouter(() => Router('addressBookList')) }} className="PersonalCenter_tool_list" >
                <Text>我的地址</Text></View>
            <View onClick={() => { reduceRouter(() => Router('myCollect')) }} className="PersonalCenter_tool_list" >
                <Text >我的收藏</Text></View>
            <View onClick={() => { reduceRouter(() => Router('myMutuaList')) }} className="PersonalCenter_tool_list" >
                <Text>我的互助</Text></View>
            <View onClick={() => { reduceRouter(() => Router('FormDemo')) }} className="PersonalCenter_tool_list" >
                <Text>录入发票</Text></View>


        </View>
    }
    return <View className="PersonalCenter_box">

        {list.map(val => {
            const { key } = val
            if (key) {
                return render[key]
            }
            return null
        })}
    </View >
}
export default PersonalCenter